<template>
  <div class="countdown-container1">
    <div class="header">Limited Time Offer</div>
    <div class="progress-bar"></div>
    <div class="countdown-display">
      <div class="countdown-item">
        <span class="countdown-value">{{ minutes }}</span>
        <span class="countdown-label">MIN</span>
      </div>
      <div class="countdown-item">
        <span class="countdown-value">{{ seconds }}</span>
        <span class="countdown-label">SEC</span>
      </div>
    </div>
    <div class="message">Complete your payment before this offer expires</div>
    <div class="btn">Limited time only</div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  totalSeconds: {
    type: Number,
    required: true
  }
});


const timeLeft = ref(props.totalSeconds);

let timerId;

const minutes = computed(() => String(Math.floor(timeLeft.value / 60)).padStart(2, '0'));

const seconds = computed(() => String(timeLeft.value % 60).padStart(2, '0'));

const progressWidth = computed(() => {
  return (props.totalSeconds - timeLeft.value) / props.totalSeconds * 100 + '%';
});

onMounted(() => {
  timerId = setInterval(() => {
    if (timeLeft.value > 0) {
      timeLeft.value--;
    } else {
      clearInterval(timerId);
    }
  }, 1000);
});

onUnmounted(() => {
  clearInterval(timerId);
});
</script>

<style scoped>
.countdown-container1 {
  background-color: #ffeae3;
  border: 2px dashed #ff8a80;
  border-radius: 10px;
  padding: 20px;
  /* width: 300px; */
  text-align: center;
}

.header {
  color: #ee2007;
  font-weight: bold;
  margin-bottom: 10px;
}

.progress-bar {
  height: 5px;
  background-color: #ff8a80;
  border-radius: 2px;
  margin-bottom: 10px;
  width: 100%;
  position: relative;
}

.progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progress-width, 0%);
  background-color: #ff5252;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.countdown-display {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

.countdown-item {
  /* background-color: #fff; */
  border-radius: 5px;
  padding: 5px 10px;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

.countdown-value {
  color: #f44336;
  font-size: 24px;
  font-weight: bold;
}

.countdown-label {
  color: #757575;
  font-size: 12px;
  /* text-transform: uppercase; */
}

.message {
  color: #757575;
  margin-bottom: 10px;
}

.btn {
  background-color: #fdd8d1;
  color: #EB1700;
  border: none;
  border-radius: 5px;
  padding: 8px 20px;
  cursor: pointer;
  border-radius: 60px;
  font-weight: 700;
}
</style>
